$(function(){

    function Magnifier(){
        // 创建设计好程序需要的数据
        // 小图元素; 
        this.small_img_wrapper = document.querySelector(".small-img");
        // 焦点元素; 
        this.focus     = document.querySelector(".focus");
        // 大图焦点元素; 
        this.big_img_focus  = document.querySelector(".big-img");
        // 大图图片 ; 
        this.big_img = this.big_img_focus.querySelector("img");

        // 所有内容的容器 :
        this.container = document.querySelector(".container");
        // 分页器之中的按钮 : 
        this.pagination_bullets = document.querySelectorAll(".pagination img");
        // 选择小图图片 ; 
        this.small_img = document.querySelector(".small-img img");

        // 创建图片数据 : 
        this.img_list = [
              {
                  small : "https://img.ingping.com/images/product/L/201510/201510121648450457793.jpg",
                  big : "https://img.ingping.com/images/product/B/201510/201510121648450457793.jpg"
              },
              {
                  small : "https://img.ingping.com/images/product/L/201808/20180809170733059713.jpg",
                  big : "https://img.ingping.com/images/product/B/201808/20180809170733059713.jpg"
              },
              {
                  small : "https://img.ingping.com/images/product/L/201510/201510121648510041856.jpg",
                  big : "https://img.ingping.com/images/product/B/201510/201510121648510041856.jpg"
              },
              {
                  small : "https://img.ingping.com/images/product/L/201510/20151012164855027340.jpg",
                  big : "https://img.ingping.com/images/product/B/201510/20151012164855027340.jpg"
              }
        ]
        this.container_offset = {
              left : this.container.offsetLeft,
              top  : this.container.offsetTop
        }
        this.focus_style = getComputedStyle( this.focus );
  }
  // 绑定事件; 
  Magnifier.prototype.bindEvent = function(){
        // 给小图绑定事件; 
        var instance = this;
        // 鼠标移入小图，应该让小图焦点和大图焦点同时显示; 
        this.small_img_wrapper.onmouseover = function(){
              instance.toggle("block");
        }
        // 鼠标移出小图，应该让小图焦点和大图焦点同时隐藏; 
        this.small_img_wrapper.onmouseout = function(){
              instance.toggle("none");
        }
        // 给元素绑定鼠标移动事件; 
        this.small_img_wrapper.onmousemove = function( evt ){
              var e = evt || event;
              instance.move( e.clientX - instance.container_offset.left  , e.clientY - instance.container_offset.top );
        }
        // 给分页器添加事件 : 
        for(let i = 0 ; i < this.pagination_bullets.length ; i ++){
              this.pagination_bullets[i].onclick = function(){
                    instance.changeItem( i );
              }
        }
        console.log(this.pagination_bullets);
  }
  Magnifier.prototype.toggle = function( type ){
        this.focus.style.display = type;
        this.big_img_focus.style.display = type;
  }
  // 让图片跟随移动; 
  Magnifier.prototype.move = function( x , y ){

        var _left =  x - parseInt(this.focus_style.width) / 2
        var _top  =  y - parseInt(this.focus_style.height) / 2
        _left = _left < 0 ? 0 : _left;
        _left = _left > 114 ? 114 : _left;
        _top = _top < 0 ? 0 : _top; 
        _top = _top > 114 ? 114 : _top;
        this.focus.style.left = _left + "px";
        this.focus.style.top  = _top + "px";
        var _left_per = _left / 114;
        var _top_per  = _top  / 114;

        this.big_img.style.left = -260 * _left_per + "px";
        this.big_img.style.top  = -260 * _top_per + "px";
  }
  
  Magnifier.prototype.changeItem = function( index ){

        for(var i = 0 ; i < this.pagination_bullets.length; i ++){
              this.pagination_bullets[i].className = "";
        }
        this.pagination_bullets[index].className = "active";
        this.small_img.src = this.img_list[index].small;
        this.big_img.src = this.img_list[index].big;
  }
  var m = new Magnifier();
  m.bindEvent();
    
})